<template>
  <div class="common-tabs" v-if="options">
    <el-tabs
      v-model="options.activeTab"
      :type="options.type"
      :tab-position="options.tabPosition"
      @tab-click="handleTabClick"
    >
      <template v-for="tab in tabs">
        <el-tab-pane :key="tab.index" :label="tab.label" :name="tab.index">
          <slot v-if="tab.index == options.activeTab"></slot>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'CommonTabs',
  props: {
    options: {
      type: Object,
      required: true
    },
    tabs: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    // 处理点击标签
    handleTabClick(value) {
      this.$emit('handleTabClick', value);
    }
  }
};
</script>

<style scoped>
.common-tabs {
  width: 100%;
  height: 100%;
}
.el-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.el-tab-pane {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
